<template>
  <view class="wrap">
    <view class="headers">
      <global-nav-bar
        :title="type == 2 ? '配件审批详情' : '配件申请详情'"
        :fixed="false"
        backgroundColor="#2C2C2C"
        color="#fff"
        @clickLeft="clickLeft"
        :isLeftBack="fromType ? false : true"
      >
      </global-nav-bar>
    </view>
    <view class="card">
      <view class="title-ac">
        <view class="title">
          <text
            >
            {{detail.buildingName + "-" + detail.elevatorAddress || ""}}
<!--            {{ detail.detailTitle || "" }} -->
            <text
              class="tag"
              v-for="(it, i) in btnBoxList"
              :key="i"
              v-show="it && detail.emerProcType == it.key"
              :style="{ color: it.color, borderColor: it.color }"
            >
              {{ it.label }}
            </text>
          </text>
        </view>
        <view
          @click="viewStatusStep"
          :class="['status', 'yellow', 'status-label']"
          :style="[
            resDataNameColor(
              detail.auditStatus == 5 ? '已退回' : detail.statusName
            ),
          ]"
          >{{
            detail.auditStatus == 5 ? "已退回" : detail.statusName || ""
          }}</view
        >
      </view>
      <view class="tips">申请人<text class="desc">{{ detail.createUserName || "" }}</text> 申请时间<text class="desc">{{ detail.createTime || "" }}</text></view>
    </view>
    
    <!-- 销售信息 -->
    <view class="card sales-info-card" v-if="![0,1,8,9].includes(detail.status)">
      <view class="card-title">
        <view class="title">销售信息</view>
        <view class="detail-btn" v-if="shipmentOrders" @click="trackShipping">
          发货跟踪
          <uni-icons type="arrowright" color="#999" size="16"></uni-icons>
        </view>
      </view>
      <view class="card-content sales-body">
        <view v-if="!shipmentOrders" class="empty-sales-info">
          <image src="@/static/images/default.png" mode="" />
          <text>销售订单未生成</text>
        </view>
        <view v-else>
          <view class="info-item">
            <view class="info-item-label">销售订单编号:</view>
            <view class="info-item-content">
              {{ shipmentOrders.orderId || '-' }}
              <text class="tag-view" :class="[getShipmentStatusClass(shipmentOrders)]">{{ shipmentOrders.orderStatusName }}</text>
            </view>
          </view>
          <view class="info-item">
            <view class="info-item-label">报价单号:</view>
            <view class="info-item-content">{{ shipmentOrders.quoteId || '-' }}</view>
          </view>
          <view class="info-item">
            <view class="info-item-label">下单日期:</view>
            <view class="info-item-content">{{ shipmentOrders.orderDate || '-' }}</view>
          </view>
          <view class="info-item">
            <view class="info-item-label">发货完成日期:</view>
            <view class="info-item-content">{{ shipmentOrders.actualDeliveryDate || '-' }}</view>
          </view>
          <view class="info-item">
            <view class="info-item-label">商务人员:</view>
            <view class="info-item-content">{{ shipmentOrders.salesPerson || '-' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view
     :class="['end-msg',detail.auditStatus == 5 ? 'return-msg' : '']"
      v-if="detail.auditStatus == 3 || detail.auditStatus == 5"
    >
      <view class="end-msg-header">
        <view 
          :class="['end-msg-left',returnUp?'':'over']"
        >
          {{ detail.auditStatus == 3 ? "终止原因:" : "退回理由:"
          }}{{ infoMsg || "无" }}
        </view>

        <view class="end-msg-rigth" @click.stop="returnUp = !returnUp" v-if="showArrow">
          <uni-icons :color="detail.auditStatus == 3 ?'':'#FA6400'" size="16" :type="!returnUp?'arrowdown':'arrowup'"></uni-icons>
          </view
        >
      </view>
      <view
        class="end-msg-img"
        v-if="detail.imgs && detail.imgs.length && returnUp"
      >
        <imageDragSort
          max="9"
          :disabled="true"
          :list="detail.imgs"
        ></imageDragSort>
      </view>
    </view>

    <!-- <view class="end-msg return-msg" v-else-if="detail.auditStatus == 5">
      <view>退回理由：</view>
      <view>{{ infoMsg || "无" }}</view>
    </view> -->

    <!-- 状态进度条 -->
    <!-- 去除 -->
    <!-- 
    <view class="card">
      <view class="title">配件进度</view>
      <view class="step"><status-step :list="statusList" :actIndex="detail.status" :log="logs"></status-step></view>
    </view>
     -->
    <!-- 状态进度条 end -->

    <!-- 配件信息 -->
    <view class="card" v-for="(item, idx) in detail.partsList" :key="item.id">
      <view class="card-title" @click="togglePartCard(idx)">
        <view class="title">配件需求明细({{ idx + 1 }})</view>
        <view class="expanded">
          <text>{{ item.expanded ? '收起' : '展开' }}</text>
          <uni-icons color="#0091FF" size="16" :type="item.expanded ? 'arrowup' : 'arrowdown'"></uni-icons>
        </view>
      </view>
      <view class="info-item">
        <view class="info-item-label">配件类型:</view>
        <view class="info-item-content">{{ item.partsName || "" }}
          <text v-if="item.partsName && item.floorStandNames">({{ item.floorStandNames.replaceAll(",", ">") }})</text>
        </view>
      </view>
      <view v-show="item.expanded">
<!--        <view class="ele-name"> -->
<!--          <view>{{detail.buildingName + "-" + detail.elevatorAddress || ""}}</view> -->
<!--          <text>配件</text> -->
<!--        </view> -->
        <template v-if="item.skuPartsInfo && item.skuPartsInfo.skuItemList">
          <view class="info-item" v-for="(sku, i) in item.skuPartsInfo.skuItemList" :key="i">
            <view class="info-item-label">{{ sku.label || "" }}:</view>
            <view class="info-item-content">{{ sku.value || "" }}{{ sku.unitName || "" }}</view>
          </view>
        </template>
        <view class="info-item" v-else>
          <view class="info-item-label">配件型号:</view>
          <view class="info-item-content">{{ item.partsModel || "" }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-label">需求数量:</view>
          <view class="info-item-content">{{ item.num || "" }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-label">计量单位:</view>
          <view class="info-item-content">{{ item.unitNameValue || "-" }}</view>
        </view>

        <view class="info-item">
          <view class="info-item-label">备注:</view>
          <view class="info-item-content">{{ item.desc || "" }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-label" v-if="item.extWordUrl">附件:</view>
          <view class="info-item-word">
            <view v-for="(file, fileIndex) in item.extWordUrl" :key="fileIndex" @click="handledownload(file)">
              {{ file.name }}
            </view>
          </view>
        </view>

        <view class="imgs">
          <imageDragSort max="9" :disabled="true" :list="item.otherUrl"></imageDragSort>
        </view>
        
        <!-- 关联配件信息 -->
        <view class="related-parts-section" v-if="item.relatedPartsList && item.relatedPartsList.length > 0">
          <view class="related-title">关联配件信息</view>
          <view class="related-parts-list">
            <view v-for="(part, partIndex) in item.relatedPartsList" :key="partIndex" class="related-part-item">
              <image v-if="part.picture" @click="previewImage(part.picture)" :src="part.picture" class="part-image"/>
              <view v-else class="empty-image">
                <uni-icons color="#999999" size="20" type="image"></uni-icons>
                <view class="empty-image-text">暂无图片</view>
              </view>
              <view class="part-details">
                <view class="part-name">{{ part.spuName || '--' }}</view>
                <view class="part-info-row">
                  <view class="label">规格型号:</view>
                  <view class="value">{{ formatModel(part) || '--'}}</view>
                </view>
                <view class="part-info-row">
                  <view class="label">物料编号:</view>
                  <view class="value">{{ part.skuCode || '--' }}</view>
                </view>
                <view class="part-info-row">
                  <view class="label">需求数量:</view>
                  <view class="value">{{ part.num || '--' }} <text v-if="part.unitChName">{{part.unitChName}}</text></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 配件信息end -->

    <!-- 配件收货地址 -->
    <view class="card" v-if="Object.keys(addressObj).length > 0">
      <view class="title">配件收货地址</view>
      <view class="partsConten">
        <view class="add_row">
          <view class="cel_L">{{ addressObj.userName || "" }}</view>
          <view class="cel_R">{{ addressObj.phone || "" }}</view>
        </view>
        <view class="add_row">
          {{
            addressObj.provinceName +
              addressObj.cityName +
              addressObj.adName +
              addressObj.address || ""
          }}
        </view>
      </view>
    </view>
    <!-- 配件收货地址 end -->

    <!-- 关联任务 -->
    <view
      class="card"
      v-if="
        detail.malDetailVO.faultMessageList &&
        detail.malDetailVO.faultMessageList.length >= 1
      "
    >
      <view class="title">
        关联任务
        <view class="detail-btn" @click="toRepairDetail">
          详情
          <image
            src="/static//repair/building/detaiimages/repairFitting/right.png"
          ></image>
        </view>
      </view>
      <view class="ele-name">
        {{ detail.buildingName || "" }}-{{ detail.elevatorAddress || "" }}
        <text class="deep">维修</text>
        <view class="tag" v-if="detail.malDetailVO.workOrderType == 2">{{
          detail.malDetailVO.workOrderTypeName
        }}</view>
        <view class="tag" v-else>{{
          detail.malDetailVO.sourcePlanTypeName
            ? detail.malDetailVO.workOrderTypeName +
              "-" +
              (detail.malDetailVO.sourcePlanTypeName || "")
            : detail.malDetailVO.workOrderTypeName
        }}</view>
      </view>
      <view class="main_card_item">
        <view class="label">紧急程度</view>
        <view class="desc">
          <text
            class="tag"
            v-for="(it, i) in btnBoxList"
            :key="i"
            v-show="detail.malDetailVO.emerProcType == it.key"
            :style="{ color: it.color, borderColor: it.color }"
          >
            {{ it.label }}
          </text>
        </view>
      </view>
      <view class="main_card_item">
        <view class="label">报障状态</view>
        <view class="desc">
          <view
            :class="[
              'tag',
              detail.malDetailVO.elevatorStop == 1 ? 'normal' : 'stop',
            ]"
            >{{
              detail.malDetailVO.elevatorStop == 1 ? "正常运行" : "停梯"
            }}</view
          >
        </view>
      </view>
    </view>
    <!-- 关联任务 -->

    <!-- 审批信息 -->
    <view class="card approveCard" v-if="detail.status != 9">
      <view class="title">审批信息</view>
      <msg-step :steps="stepList"></msg-step>
    </view>
    <view class="planText">
      <view class="title">任务ID:</view>
      <view class="content"
        ><text>{{ planId }}</text></view
      >
    </view>
    <!-- 审批信息 end -->
    <!-- 审批意见-弃用 -->
    <!--
    <view class="card" v-if="
      detail.status == 1 &&
      role != 1 &&
      type == 2 &&
      assignee.indexOf(userinfo.user_id) != -1
    ">
      <view class="title">审批意见</view>
      <view class="textarea">
        <textarea placeholder-style="color:#ccc" placeholder="请输入审批意见" v-model="opinion" maxlength="300" cols="30"
          rows="10"></textarea>
        <view class="num">{{ opinion.length }}/300</view>
      </view>
    </view>
    -->
    <!-- 审批意见 -->
    <view class="bottom-block"></view>

    <!-- 底部按钮 -->
    <!-- 维保端审批 -->
    <view
      class="bottom-btns btn-group-3"
      v-if="type == 2 && detail.status === 0 && detail.auditStatus === 1"
    >
      <!-- 维保组长权限 -->
      <!--      <view class="btn info" v-if="showChange" @click="changeApprove">转审批</view> -->
      <view class="btn info" @click="handleAudit(2)">退回</view>
      <view class="btn error" @click="handleAudit(0)">审批不通过</view>
      <view class="btn suc" @click="handleAudit(1)">审批通过</view>
    </view>

    <!-- 维保员权限 -->
    <view
      class="bottom-btns"
      v-else-if="
        detail.status == 0 &&
        detail.auditStatus == 1 &&
        type == 3 &&
        userinfo.user_id == detail.createUser
      "
    >
      <view class="btn info" @click="pressFuc">催办</view>
      <view class="btn suc withdraw" @click="withdrawalFuc">撤回申请</view>
      <view class="btn suc" @click="toEdit(2)">修改配件信息</view>
    </view>
    <!-- 维保员权限 -->
    <view
      class="bottom-btns btn-group"
      v-else-if="
        detail.auditStatus == 5 &&
        type == 3 &&
        userinfo.user_id == detail.createUser
      "
    >
      <view class="btn info" @click="withdrawalFuc">撤回申请</view>
      <view class="btn suc withdraw" @click="toEdit(1)">重新提交</view>
    </view>

    <view
      class="bottom-btns"
      v-else-if="
        detail.status >= 5 && ![8, 9, 10, 11, 12].includes(detail.status)
      "
    >
      <view class="btn suc" @click="toOrderDeatil">查看配件任务详情</view>
    </view>
    <uni-popup ref="popupStep" type="bottom" background-color="#fff">
      <view class="status-step">
        <view class="status-step-title">配件进度</view>
        <scroll-view scroll-y="true" class="progress">
          <view class="status-step-body"
            ><status-step
              :steps="statusList"
              :active="
                detail.status == 8 || detail.status == 9 ? -1 : detail.status
              "
            ></status-step
          ></view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup
      ref="popupAudit"
      type="bottom"
      background-color="#fff"
      @change="handlePopupChange"
    >
      <view class="card audit-card">
        <view class="header">
          <view class="line"></view>
        </view>
        <view class="title"
          >{{ auditName === "同意" ? "审批意见" : `审批${auditName}原因`
          }}<text class="desc">(选填)</text></view
        >
        <view class="textarea" v-if="popupFlag">
          <textarea
            :placeholder="`请输入${auditName}原因`"
            v-model="auditRemark"
            maxlength="300"
            cols="30"
            rows="10"
          ></textarea>
          <view class="num">{{ auditRemark.length }}/300</view>
        </view>
        <view class="btn-bottom">
          <view class="btn-save" @click="handleSubmitAudit">{{
            auditName
          }}</view>
        </view>
      </view>
    </uni-popup>
    <previewMedia ref="previewMedia"></previewMedia>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
// import sdTag from '@/components/sd-tag/sd-tag.vue';
import msgStep from './componets/msg-step.vue';
import statusStep from './componets/status-step.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import {
	withdrawalPlanNew,
	pressPlanNew,
	appRovePlan,
	getPartsDetail,
	getPlanStep,
	getPlanDetail,
	partsApprove,
} from '@/apis/workOrder.js';
import { getSelectWorkTracks } from '@/apis/taskStepPage.js';
// import { finish, falutReason } from '@/apis/repair.js';
import {getERPDetailMain, getERPDetailSub, partsCompanyAddress} from '@/apis/parts.js';
import imageDragSort from '@/components/image-drag-sort/img-and-video.vue';
// import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
export default {
	components: { imageDragSort, GlobalNavBar, statusStep, msgStep },
	data() {
		return {
			infoMsg: '',
			showMore: false,
			// 当前节点审批人
			assignee: '',
			// 跳转入口 1普通详情  2审批页 3我的申请
			type: '',
			planId: '',
			// 审批详情id
			approveId: '',
			// 审批意见
			opinion: '',
			detail: {
				status: '',
				malDetailVO: {},
				otherUrl: [],
				partsList: [], // 添加partsList数组
			},
			taskId: '',
			stepList: [],
			// 转审批显示
			showChange: true,
			logs: [],
			// isApply: "", //判断是否从配件申请页面调过来,如果是返回申请页面
			fromType: '',
			tempFilePath: '',
			// 维修详情工单id
			fromPlanId: null,
			statusList: [
				{
					status: 1,
					name: '待审批',
					time: '',
				},
				{
					status: 2,
					name: '待报价',
					time: '',
				},
				{
					status: 3,
					name: '待回签',
					time: '',
				},
				{
					status: 4,
					name: '待采购',
					time: '',
				},
				{
					status: 5,
					name: '待发货',
					time: '',
				},
				{
					status: 6,
					name: '待收货',
					time: '',
				},
				{
					status: 7,
					name: '待分配',
					time: '',
				},
				{
					status: 8,
					name: '待更换',
					time: '',
				},
				{
					status: 9,
					name: '更换中',
					time: '',
				},
				{
					status: 10,
					name: '已完成',
					time: '',
				},
			],
			// 地址信息
			addressObj: {},
			btnBoxList: [
				// 紧急程度标签
				// { color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4' },
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '一般', key: '4' },
				// { color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3' },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '一般', key: '3' },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2' },
				// { color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1' },
				{ color: '#e02020', bgColor: '#ffecec', label: '紧急', key: '1' },
			],
			auditName: '拒绝',
			auditRemark: '',
			popupFlag: false,
			// 默认收起
			returnUp: false,
			isExpand: false, // 是否展开
			shipmentOrders: null, // 销售信息
			deliveryList: null, // 发货明细
		};
	},
	// onBackPress(e){
	// 	console.log(e,999)
	//     uni.redirectTo({
	//             url:'/pages/home/index'
	//         });
	//        return true;
	// },
	computed: {
		...mapState('user', ['userinfo']),
		role() {
			// 0无权限  1维保员 2维保组长
			if (this.userinfo.role_name) {
				return this.userinfo.role_name == 'maintenance' ? 1 : 2;
			} else {
				return 0;
			}
		},
		// 退回原因超过1行或者有图片才展示箭头
		showArrow() {
			if (this.detail.imgs && this.detail.imgs.length
			) {
				return true;
			}
			if (this.infoMsg.length > 20) {
				return true;
			} else {
				return false;
			}
		},
	},
	async onLoad(os) {
		console.log(os, 'os的至');
		if (os.id) {
			this.planId = os.id;
			this.type = os.type;
			this.fromPlanId = os.fromPlanId;
			// this.taskId = os.taskId || "";
		}
		this.fromType = os.fromType || '';
		if (!this.userinfo.user_id) {
			uni.showLoading({
				title: '加载中',
			});
			let hasLogin = await this.handleRreshToken();
			if (!hasLogin && !this.userinfo.user_id) {
				this.toLogin();
				return;
			}
		}

		this.initData();
		this.getCompanyAddress();
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		// 设置销售信息状态样式
		getShipmentStatusClass(shipmentOrders) {
			switch (Number(shipmentOrders.orderStatus)) {
			case 1:
				return 'tag-view-red';
			case 2:
				return 'tag-view-blue';
			case 6:
				return 'tag-view-green';
			case 8:
				return 'tag-view-orange';
			default:
				return 'tag-view-gray';
			}
		},
		// 图片预览
		previewImage(url) {
			if (!url) return;
			uni.previewImage({
				current: url,
				urls: [url],
			});
		},
		// 格式化关联配件的规格
		formatModel(row) {
			if (row.attr) {
				let arr = JSON.parse(row.attr);
				let str = arr.map(
					(item) =>
						(item.key || '') +
                ':' +
                (item.value || '') +
                '' +
                (item.unit ? '(' + item.unit + ')' : '')
				);
				return str.join('; ');
			}
			if (row.skuItemList) {
				let str = row.skuItemList.map(
					(item) =>
						(item.label || '') +
                ':' +
                (item.value || '') +
                '' +
                (item.unitName ? '(' + item.unitName + ')' : '')
				);
				return str.join('; ');
			}
			return '';
		},
		trackShipping() {
			// 可以在这里处理发货跟踪的点击事件
			console.log('跳转到发货跟踪页面');
			uni.navigateTo({
				url: '/subpages/approve/shipmentDetail?orderId=' + this.shipmentOrders.orderId,
			});
		},
		// 下载附件
		handledownload(plan) {
			uni.showLoading({
				title: '下载中',
				icon: 'none',
			});
			// let str = plan.url.substring(plan.url.indexOf('/') + 44);
			wx.downloadFile({
				url: plan.url,

				success: (res) => {
					console.log(res, '下载的文件');
					if (res.statusCode === 200) {
						this.tempFilePath = res.tempFilePath;
						console.log(this.tempFilePath, 'this.tempFilePath ');
						this.openFile(plan.type);
						uni.hideLoading();
					}
				},
				fail: (err) => {
					console.log(err, '错误');
					uni.hideLoading();
				},
			});
		},
		openFile(type) {
			console.log(this.tempFilePath, 'this.tempFilePath', '打开文件');
			wx.openDocument({
				filePath: this.tempFilePath,
				showMenu: true,
				fileType: type.substring(1),
				success: () => {
					console.log('打开文档成功');
				},
				fail: (err) => {
					console.log(err);
				},
			});
		},
		// 点击返回配件申请页面 type0 为故障申请 1为配件审批
		clickLeft() {
			console.log('返回');
			// 返回我的配件申请
			if (this.fromType == 'apply') {
				// uni.navigateBack({});
				uni.reLaunch({
					url: '/pageModules/myApplication/myApplication?type=1',
				});
				// 维修详情页
			} else if (this.fromType == 'tasksPage') {
				uni.reLaunch({
					url:
            `/subpages/repair/repariDetail?planId=${this.fromPlanId}&elevatorId=${this.detail.elevatorId}&typePage=` +
            1,
				});
			} else {
				// 返回申请记录
				// let obj = {
				//   planId: this.planId,
				//   elevatorId: this.detail.elevatorId,
				//   buildingName: this.detail.buildingName,
				//   elevatorAddress: this.detail.elevatorAddress,
				// };
				// uni.redirectTo({
				//   url: "/pageModules/parts/partsRecord?obj=" + JSON.stringify(obj),
				// });
				uni.navigateBack({});
			}
		},
		// 查看维修详情
		toRepairDetail() {
			uni.navigateTo({
				url: `/subpages/repair/repariDetail?planId=${this.detail.malDetailVO.planId}&elevatorId=${this.detail.elevatorId}`,
			});
		},
		// 获取任务跟踪进度条
		getSelectWorkTracks() {
			return new Promise((resolve) => {
				getSelectWorkTracks({ planId: this.planId }).then((res) => {
					let workLogs = res.data.workLogs;
					let taskStatus = res.data.taskStatus;
					let logs = [];
					let hideStatus = [8, 9, 10, 11];
					this.statusList = taskStatus.filter(
						(v) => !hideStatus.includes(v.status)
					);
					for (let i = 0; i < this.statusList.length; i++) {
						let createTime = '';
						for (let j = 0; j < workLogs.length; j++) {
							if (workLogs[j].planStatus == this.statusList[i].status) {
								createTime = workLogs[j].createTime;
								this.statusList[i].time = workLogs[j].createTime;
								break;
							}
						}
						logs.push({ createTime });
					}
					let auditStatusObj = {
						1: '审核中',
						2: '审核通过',
						3: '审核不通过',
						4: '已撤回',
						5: '审核退回',
					};
					let lastPlanStatus =
            workLogs[workLogs.length - 1].planStatus === 8
            	? 7
            	: workLogs[workLogs.length - 1].planStatus;
					console.log(lastPlanStatus, 'lastPlanStatus');
					let lastPlanStatusIndex = this.statusList.findIndex(
						(item) => item.status == lastPlanStatus
					);
					console.log(lastPlanStatusIndex, 'lastPlanStatusIndex');
					let finishObj = null;
					let isFinish = false;
					workLogs.forEach((v, i) => {
						v.auditStatusName = auditStatusObj[v.status];
						if (v.ext) {
							v.ext = JSON.parse(v.ext);
							this.infoMsg = v.ext.remark || '';
							console.log(this.infoMsg, 'this.infoMsg');
							if (v.ext.approveDesc) {
								v.auditStatusName = v.ext.approveDesc;
							}
							if (v.typeName === '已关闭') {
								v.typeName = '终止';
							}
						}
						if (v.planStatus != 8 && v.planStatus != 9) {
							let planStatusIndex = this.statusList.findIndex(
								(item) => item.status == v.planStatus
							);
							console.log(planStatusIndex, 'planStatusIndex');
							 if (lastPlanStatusIndex > planStatusIndex) {
								v.auditStatusName = '审核通过';
							}
							if (v.ext && v.ext.approveDesc) {
								v.auditStatusName = v.ext.approveDesc;
							}
							if (v.typeName === '提交配件申请' && i == 0) {
								v.auditStatusName = '发起';
							}
							if (
								(v.typeName === '需求审批' || v.typeName === '信息审核') &&
                v.userNames
							) {
								v.executor = v.userNames;
							}
							if (
								v.typeName === '待处理' ||
                v.typeName === '重新提交配件申请'
							) {
								v.auditStatusName = '';
							}
							if (v.planStatus === 5) {
								v.typeName =
                  '分配任务' + (v.userNames ? '【' + v.userNames + '】' : '');
							}
							// 流程大于待收货时，却未完成整个流程，手动添加审核结束状态
							if (lastPlanStatusIndex > 5) {
								finishObj = {
									status: 1,
									executor: '',
									ext: null,
									planStatus: 7,
									typeName: '审核结束',
								};
							}
							if (v.planStatus === 7) {
								isFinish = true;
							}
						}
						// if(v.status == 5 || v.status == 3){
						//   this.infoMsg = v.ext.remark || '';
						// }
					});
					this.logs = logs;
					// 只显示配件流程审批节点【配件审核】【待报价】【待回签】【待采购】【待发货】【待收货】
					this.stepList = workLogs.filter((v) =>
						[0, 1, 2, 3, 10, 11, 12, 7, 8, 9].includes(v.planStatus)
					);
					// 流程大于待收货时，却未完成整个流程，手动添加审核结束状态
					if (finishObj && !isFinish) {
						this.stepList.push(finishObj);
					}
					console.log(this.stepList, 'stepList');
					// this.$forceUpdate();
					resolve();
				});
			});
		},
		async initData() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			await this.getPartsDetail();
			// await this.getPlanDetail();
			this.getSelectWorkTracks();
			// this.getPlanStep();
			uni.hideLoading();
			return;
		},
		resDataNameColor(name) {
			let style = {
				color: '#0A979C',
				background: '#e0fffa',
			};
			switch (name) {
			case '更换中':
				style = {
					color: '#0091FF',
					background: '#DCF0FF',
				};
				break;
			case '已完成':
				style = {
					color: '#55A302',
					background: '#E4FFD6',
				};
				break;
			case '已撤回':
				style = {
					color: '#999999',
					background: '#F5F5F5',
				};
				break;
			case '已退回':
				style = {
					color: '#FA6400',
					background: '#FDF1E9',
				};
				break;
			case '已终止':
				style = {
					color: '#E02020',
					background: '#FFE3E3',
				};
				break;
			}
			return style;
		},
		// 查看配件任务详情
		toOrderDeatil() {
			uni.navigateTo({
				url: `/subpages/workOrders/partOrder?planId=${this.detail.planId}&elevatorId=${this.detail.elevatorId}`,
			});
		},
		// 催办
		pressFuc() {
			uni.showLoading({
				title: '提交中',
				mask: true,
			});
			pressPlanNew({
				businessApproveId: this.approveId,
			}).then(() => {
				uni.hideLoading();
				uni.showToast({
					title: '催办成功',
				});
			});
		},
		// 撤回申请
		withdrawalFuc() {
			uni.showModal({
				title: '',
				content: '是否确认撤回申请？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
							mask: true,
						});

						withdrawalPlanNew({
							businessApproveId: this.approveId,
						}).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '撤回成功',
								mask: true,
							});
							this.detail.status = 9;
							setTimeout(() => {
								this.initData();
							}, 700);
						});
					}
				},
			});
		},
		// 审批工单 k 0不通过 1通过 2退回
		toApprovePlan(k) {
			uni.showModal({
				title: k == 1 ? '是否确定审批通过？' : '是否确定审批不通过？',
				content:
          k == 1
          	? '注:审批通过后，任务将由报价员审批'
          	: '注:审批不通过后，任务将直接关闭',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
							mask: true,
						});
						let postData =
              k == 1
              	? {
              		taskId: this.taskId,
              		processInstanceId: this.detail.processInstanceId,
              		flag: 'ok',
              		comment: this.opinion,
              	}
              	: {
              		taskId: this.taskId,
              		processInstanceId: this.detail.processInstanceId,
              		comment: this.opinion,
              		variables: { condition: 0 },
              	};
						appRovePlan(postData).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '提交成功',
								mask: true,
							});
							setTimeout(() => {
								this.initData();
							}, 700);
						});
					}
				},
			});
		},
		// 审批工单 type 0不通过 1通过 2退回
		handleAudit(type) {
			switch (type) {
			case 0:
				this.auditName = '拒绝';
				break;
			case 1:
				this.auditName = '同意';
				break;
			case 2:
				this.auditName = '退回';
				break;
			}
			this.auditRemark = '';
			this.$refs.popupAudit.open();
		},
		// 转审批
		changeApprove() {
			uni.showModal({
				title: '是否确定转审批？',
				content: '注:转审批后，任务将由维保主管审批',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
							mask: true,
						});
						appRovePlan({
							taskId: this.taskId,
							processInstanceId: this.detail.processInstanceId,
							comment: this.opinion,
							variables: { condition: 1 },
						}).then(() => {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '操作成功',
								showCancel: false,
								success: () => {
									this.initData();
									// uni.navigateBack({});
								},
							});
						});
					}
				},
			});
		},
		// 任务状态详情，维保员列表等信息
		getPlanDetail() {
			return new Promise((resolve) => {
				getPlanDetail({ planId: this.planId }).then((res) => {
					console.log(res);
					// this.detail.auditStatusName = res.data.statusName;
					// this.detail.auditStatus = res.data.status;
					resolve();
				});
			});
		},
		// 配件申请详情
		getPartsDetail() {
			return new Promise((resolve) => {
				getPartsDetail({ planId: this.planId }).then((res) => {
					// this.getShipmentData('DD25070187');

					console.log(res);
					// res.data.partsName = res.data.partsName.replace(/&amp;&amp;/g, "/");
					if (res.data.taskFlow) {
						this.taskId = res.data.taskFlow.taskId;
					} else {
						this.taskId = '';
					}
					if (res.data.approveId) {
						this.approveId = res.data.approveId;
					}
					if (res.data.statusName === '待审批') {
						res.data.statusName = '待审核';
					}
					if (res.data.statusName === '已关闭') {
						res.data.statusName = '已终止';
					}
					if (
						res.data.skuPartsInfo &&
            !Array.isArray(res.data.skuPartsInfo) &&
            res.data.skuPartsInfo.skuItemList
					) {
						res.data.skuPartsInfo = res.data.skuPartsInfo.skuItemList;
					} else {
						res.data.skuPartsInfo = null;
					}
					if (res.data.partsList) {
						res.data.partsList = res.data.partsList.map(item => {
							if (item.otherInfo) {
								if (typeof item.otherInfo === 'string') {
									res.data.otherInfo = JSON.parse(item.otherInfo);
								} else {
									res.data.orherInfo = item.otherInfo;
								}
							}
							if (item.imgs) {
								res.data.imgs = item.imgs;
							}
							let obj = {...item, expanded: true };
							if (item.skuList && item.skuList.length > 0) {
								obj.relatedPartsList = item.skuList.map(v => ({...v,  ...v.finallySkuPartsInfo}));
							}
							return obj;
						});
					}
					if (res.data && res.data.otherInfo) {
						this.getShipmentData(res.data.otherInfo.orderId);
						this.getERPDetailSub(res.data.otherInfo.orderId);
					}
					this.detail = res.data;
					this.$forceUpdate();
					resolve();
				});
			});
		},

		// 审批信息
		getPlanStep() {
			return new Promise((resolve) => {
				getPlanStep({ processInstanceId: this.detail.processInstanceId }).then(
					(res) => {
						const list = res.data || [];
						if (
							list.length &&
              list[list.length - 1].historyActivityId != 'groupTask'
						) {
							this.showChange = false;
						}

						console.log('list', list);
						if (list.length > 0) {
							this.assignee = list[list.length - 1].assignee;
						}
						let steps = [];
						try {
							for (let i = 0; i < list.length; ) {
								if (i % 2 == 0) {
									// 双数push流程
									steps.push({
										assignee: list[i].assignee,
										title: list[i].historyActivityName,
										userName: list[i].assigneeName,
										result: {
											time: '',
											// 1通过 2不通过 3转审核
											status: '',
											name: '',
										},
										tips: list[i].comment,
									});
								} else {
									// 单数更新流程节点
									steps[steps.length - 1].result.time = list[i].createTime;
									steps[steps.length - 1].result.name =
                    list[i].historyActivityName;
									if (
										list[i].historyActivityName &&
                    list[i].historyActivityName.indexOf('不')
									) {
										steps[steps.length - 1].result.status = 2;
									} else if (
										list[i].historyActivityName &&
                    list[i].historyActivityName.indexOf('转')
									) {
										steps[steps.length - 1].result.status = 3;
									} else {
										steps[steps.length - 1].result.status = 1;
									}
								}

								i++;
							}
						} catch (e) {
							// TODO handle the exception
							console.log('err', e);
						}
						console.log('steps', steps);
						this.stepList = steps;
						resolve();
					}
				);
			});
		},
		// 预览
		preViewFile(list, index) {
			console.log('预览照片', list, index);
			wx.previewMedia({
				sources: list,
				current: index,
			});
		},

		// 修改配件信息
		toEdit(isReturn = 2) {
			// isReturn = 1代表退回
			uni.navigateTo({
				url: `/pageModules/parts/applyParts?planIdEdit=${this.planId}&id=${this.detail.elevatorId}&isReturn=${isReturn}&returnMsg=${this.infoMsg}`,
			});
		},
		// 获取公司地址
		getCompanyAddress() {
			partsCompanyAddress({ planId: this.planId }).then((res) => {
				if (res.code === 200) {
					this.addressObj = res.data || {};
				}
			});
		},
		viewStatusStep() {
			this.$refs.popupStep.open('bottom');
		},
		// 驳回
		async handleSubmitAudit() {
			let approveStatus = 2;
			if (this.auditName === '同意') {
				approveStatus = 2;
			} else if (this.auditName === '退回') {
				approveStatus = 5;
			} else if (this.auditName === '拒绝') {
				approveStatus = 3;
			}
			console.log(this.auditRemark);
			try {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				const res = await partsApprove({
					approveStatus,
					id: this.approveId,
					remark: this.auditRemark,
					// desc: this.auditRemark,
				});
				uni.hideLoading();
				if (res.code === 200) {
					this.auditRemark = '';
					this.$refs.popupAudit.close();
					this.initData();
				}
			} catch (e) {
				uni.hideLoading();
				console.log(e, 'getSkuTemplate');
			}
		},
		handlePopupChange(e) {
			this.popupFlag = e.show;
			console.log(e, 'handlePopupChange');
		},
		toggleExpand() {
			this.isExpand = !this.isExpand;
		},
		togglePartCard(idx) {
			if (!this.detail.partsList) {
				this.$set(this.detail, 'expanded', !this.detail.expanded);
				return;
			}
			this.$set(this.detail.partsList[idx], 'expanded', !this.detail.partsList[idx].expanded);
		},
		async getShipmentData(orderId) {
			try {
				const res = await getERPDetailMain({orderId});
				if (res && res.code === 200 && res.data) {
					this.shipmentOrders = res.data[0] || null;
				}
			} catch (error) {
				console.log(error);
			}
		},
		async getERPDetailSub(orderId) {
			try {
				const res = await getERPDetailSub({orderId});
				if (res && res.code === 200 && res.data) {
					this.deliveryList = res.data || null;
				}
			} catch (error) {
				console.log(error);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.headers {
  position: sticky;
  z-index: 300;
  top: 0;
  left: 0;
  right: 0;
}

.wrap {
  width: 100%;
  min-height: 100vh;
  background-color: #f3f6f8;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
}

.card {
  width: calc(100% - 80rpx);
  border-radius: 8rpx;
  background-color: #fff;
  margin: 0rpx auto;
  margin-top: 20rpx;
  padding: 20rpx;
  line-height: 50rpx;
  position: relative;
  color: #333333;
  letter-spacing: 1rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    // color: #000;
    text-align: left;

    letter-spacing: 1rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tag {
      border: 2rpx solid transparent;
      padding: 0 10rpx;
      border-radius: 8rpx;
      font-size: 26rpx;
      font-weight: normal;
      margin-left: 4rpx;
      white-space: nowrap;
    }

    .edit-btn {
      font-size: 24rpx;
      color: #0091ff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: normal;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 5rpx;
      }
    }

    .detail-btn {
      font-size: 24rpx;
      color: #666666;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: normal;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
      }
    }
  }

  .tips {
    font-size: 24rpx;
    color: #999;
    .desc{
      color: #333333;
      margin: 0 8rpx;
    }
  }

  .ele-name {
    font-size: 28rpx;
    // font-weight: bold;
    display: flex;
    color: #000;

    // align-items: center;
    // flex-wrap: wrap;
    text {
      color: #0091ff;
      font-weight: normal;
      font-size: 22rpx;
      padding: 2rpx 5rpx;
      background: #dcf0ff;
      border-radius: 4rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
      height: 30rpx;
      line-height: 30rpx;
      white-space: nowrap;
      // display: inline-block;
    }

    .deep {
      color: #fff;
      background: #0091ff;
      margin-right: 16rpx;
    }

    .tag {
      color: #0091ff;
      height: 32rpx;
      display: flex;
      align-items: center;
      border: 1px solid #0091ff;
      padding: 0 8rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      max-width: fit-content;
      white-space: nowrap;
      margin-top: 10rpx;
    }
  }

  .main_card_item {
    display: flex;
    margin-top: 16rpx;

    .descBox {
      padding-bottom: 20rpx;

      .status_content {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
      }

      .statusFault {
        padding: 0rpx 12rpx;
        border-radius: 8rpx;
        font-size: 26rpx;
        margin-bottom: 20rpx;
        margin-left: 4rpx;
      }

      .stop {
        border: 2rpx solid #e02020;
        color: #e02020;
        margin-right: 12rpx;
      }

      .normal {
        border: 1rpx solid #0091ff;
        color: #0091ff;
        margin-right: 12rpx;
      }

      image {
        width: 32rpx;
        height: 32rpx;
      }

      .title {
        font-weight: normal !important;
        font-size: 28rpx !important;
        color: #999 !important;
      }

      .content {
        font-size: 28rpx !important;
        color: #333;
      }
    }

    .label {
      margin-right: 24rpx;
      color: #999999;
      font-size: 28rpx;
      width: 140rpx;
    }

    .desc {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      color: #333;
      font-size: 28rpx;

      .tag {
        margin-right: 12rpx;
        border: 2rpx solid transparent;
        padding: 0rpx 12rpx;
        border-radius: 8rpx;
        font-size: 26rpx;
      }

      .stop {
        border: 2rpx solid #e02020;
        color: #e02020;
      }

      .normal {
        border: 2rpx solid #0091ff;
        color: #0091ff;
      }
    }

    .phone {
      color: #0091ff;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-top: 6rpx;
      }
    }
  }

  .showMore {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999999;
    padding-top: 20rpx;

    .text_more {
      display: inline-block;
      margin-left: 12rpx;
      width: 12rpx;
      height: 12rpx;
      border-left: 2rpx #999 solid;
      border-bottom: 2rpx #999 solid;
      transform: rotate(-45deg);
      margin-bottom: 8rpx;
    }
  }

  .info-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    align-items: baseline;

    &-label {
      min-width: 140rpx;
      white-space: nowrap;
      color: #999;
    }

    &-content {
      flex: 1;
      line-height: 35rpx;
    }

    &-word {
      color: #0091ff;
      flex: 1;
      flex-direction: column;

      .fileName {
        width: 540rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .imgs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    image {
      width: 113rpx;
      height: 113rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
    }
  }

  .textarea {
    width: calc(100% - 44rpx);
    padding: 16rpx 20rpx;
    margin-top: 24rpx;
    border: 2rpx solid #e9e9e9;
    border-radius: 4rpx;
    padding-bottom: 7rpx;

    textarea {
      font-size: 28rpx;
      color: #333;
      width: 100%;
      height: 200rpx;
    }

    .num {
      font-size: 24rpx;
      text-align: right;
      color: #999999;
    }
  }
}

.approveCard {
  padding: 24rpx 20rpx;
}

.planText {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  color: #999;
  font-size: 24rpx;
}

.step {
  width: calc(100% - 40rpx);
  margin: 20rpx auto;
  margin-bottom: 8rpx;
}
.title-ac {
  display: flex;
  //align-items: center;
  justify-content: space-between;
}
.status {
  height: 48rpx;
  position: absolute;
  z-index: 10;
  right: 20rpx;
  top: 29rpx;
  font-size: 28rpx;
  line-height: 32rpx;
  //min-width: 88rpx;
  padding: 8rpx;
  font-weight: normal;
  box-sizing: border-box;
  //height: 32rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-label {
  position: relative !important;
  right: auto;
  top: auto;
  white-space: nowrap;
}
.bottom-block {
  width: 100%;
  height: 120rpx;
}

.bottom-btns {
  width: calc(100% - 38rpx - 38rpx);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx 38rpx;
  z-index: 99;
  border-top: 2rpx solid #eeeeee;

  .btn {
    flex: 1;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70rpx;
    border-radius: 8rpx;
  }

  // .btn:first-child {
  //   border-radius: 8rpx 0rpx 0rpx 8rpx;
  // }

  // .btn:last-child {
  //   border-radius: 0rpx 8rpx 8rpx 0rpx;
  // }

  .info {
    background: #f5fbff;
    color: #0091ff;
  }

  .error {
    color: #e02020;
    background: #fdeded;
  }

  .suc {
    background: #0091ff;
    color: #fff;
  }

  .withdraw {
    margin: 12rpx;
  }
}

.yellow {
  color: #f7b500;
}

.partsConten {
  .add_row {
    display: flex;

    .cel_L {
      margin-right: 20rpx;
    }
  }
}

.end-msg {
  background: #ffe3e3;
  border-radius: 0px 0rpx 8rpx 8rpx;

  width: calc(100% - 80rpx);
  margin: 0rpx auto;
  color: #e02020;
  padding: 8rpx 20rpx;
  font-size: 24rpx;

  // & > view:nth-child(1) {
  //   white-space: nowrap;
  //   display: flex;
  // }
  .end-msg-header {
    display: flex;
    justify-content: space-between;
    // margin-bottom: 16rpx;
    .end-msg-left {
      // display: flex;
      width: 600rpx;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
    .over{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .end-msg-right {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
  }
  .end-msg-img {
    margin-top: 16px;
  }
}

.status-step {
  background-color: #fff;
  padding: 48rpx 0;
  border-radius: 8rpx 8rpx 0px 0px;
  box-shadow: 0px -4rpx 12rpx 0px rgba(0, 0, 0, 0.12);

  &-title {
    margin-bottom: 48rpx;
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
    padding: 0 48rpx;
  }

  &-body {
    padding: 0 48rpx;
    // height: 45vh;
    // overflow-y: auto;
  }

  .progress {
    height: 45vh;
  }
}

.return-msg {
  background: #fdf1e9;
  color: #fa6400;
}

.btn-group {
  .btn:nth-child(1) {
    margin-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn:nth-child(2) {
    margin-left: 0 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.btn-group-3 {
  .btn:nth-child(1) {
    margin-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn:nth-child(2) {
    margin-left: 0 !important;
    border-radius: 0;
  }
  .btn:nth-child(3) {
    margin-left: 0 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.btn-bottom {
  padding: 16rpx 40rpx 24rpx 40rpx;
  border-top: 2rpx solid #eeeeee;
  .btn-save {
    display: flex;
    color: #fff;
    font-weight: 500;
    height: 70rpx;
    background: #0091ff;
    border-radius: 8rpx;
    align-items: center;
    justify-content: center;
  }
}
.audit-card {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  .header {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    //border-top: 2rpx solid #eeeeee;
    padding-top: 20rpx;
    .line {
      width: 64rpx;
      height: 10rpx;
      opacity: 1;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 2rpx solid #eeeeee;
    padding: 18rpx 40rpx;
  }
  .desc {
    font-weight: normal;
    font-size: 26rpx;
    color: #999999;
  }
  .textarea {
    width: calc(100% - 80rpx);
    margin: 24rpx auto;
    box-sizing: border-box;
  }
}
.empty-sales-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 180rpx;
  font-size: 26rpx;
  color: #999999;
  image{
    width: 64rpx;
    height: 64rpx;
  }
  text{
    margin-top: 8rpx;
  }
}
.sales-body{
  .info-item-label{
    min-width: 200rpx;
  }
}
.tag-view{
  padding: 0 4rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
  height: 32rpx;
  line-height: 32rpx;
  display: inline-block;
  &-green{
    color: #16BF99;
    border: 1px solid #16BF99;
  }
  &-orange{
    color: #FA6400;
    border: 1px solid #FA6400;
  }
  &-red{
    color: #E02020;
    border: 1px solid #E02020;
  }
  &-blue{
    color: #0091FF;
    border: 1px solid #0091FF;
  }
  &-gray{
    color: #666666;
    border: 1px solid #666666;
  }
}
.card>div:nth-child(1){
  margin-bottom: 8rpx;
}
.card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .expanded {
    display: flex;
    align-items: center;
    color: #0091FF;
    font-size: 28rpx;
    
    text {
      margin-right: 8rpx;
    }
  }
}
.related-parts-section {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  .related-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
    color: #333;
    &:before {
      content: '';
      display: inline-block;
      width: 4rpx;
      height: 24rpx;
      background-color: #0091FF;
      margin-right: 8rpx;
    }
  }
  .related-parts-list {
    .related-part-item {
      display: flex;
      padding: 16rpx 0;
      border-bottom: 1px solid #e9e9e9;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .part-image {
        width: 114rpx;
        height: 114rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      .empty-image{
        width: 114rpx;
        height: 114rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        &-text{
          font-size: 20rpx;
          color: #999;
          line-height: normal;
        }
        background: #E2E2E2;
      }
      .part-details {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .part-name {
          line-height: normal;
          margin-bottom: 12rpx;
          font-size: 28rpx;
          color: #3D3D3D;
        }
        .part-info-row {
          font-size: 24rpx;
          display: flex;
          line-height: normal;
          margin-bottom: 8rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .label {
            white-space: normal;
            color: #999;
            margin-right: 10rpx;
          }
          .value {
            width: 0;
            flex: 1;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
